<template>
	<view class="container">
		<view class="header">
			<text class="title">摇一摇</text>
			<text class="subtitle">剩余摇奖次数：{{chances}}次</text>
		</view>
		
		<view class="shake-container">
			<view class="shake-box" :class="{ 'shaking': isShaking }">
				<image src="/static/images/games/shake-box.png" mode="aspectFit" class="shake-image"></image>
				<text class="shake-text">{{shakeText}}</text>
			</view>
		</view>
		
		<view class="shake-tips">
			<text class="tips-title">摇奖说明</text>
			<view class="tips-content">
				<text>1. 用力摇晃手机即可参与摇奖</text>
				<text>2. 摇动幅度越大，中奖概率越高</text>
				<text>3. 中奖后请及时领取奖品</text>
				<text>4. 奖品将在24小时内发放</text>
			</view>
		</view>
		
		<view class="my-prizes" v-if="myPrizes.length > 0">
			<text class="prizes-title">我的奖品</text>
			<view class="prizes-list">
				<view class="prize-item" v-for="(prize, index) in myPrizes" :key="index">
					<image :src="prize.icon" mode="aspectFit" class="prize-icon"></image>
					<view class="prize-info">
						<text class="prize-name">{{prize.name}}</text>
						<text class="prize-value">{{prize.value}}</text>
					</view>
					<text class="prize-status" :class="prize.status">{{prize.statusText}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 奖品配置
const prizes = [
	{ name: '30元红包', value: '30元', icon: '/static/images/games/prize-30.png' },
	{ name: '20元红包', value: '20元', icon: '/static/images/games/prize-20.png' },
	{ name: '10元红包', value: '10元', icon: '/static/images/games/prize-10.png' },
	{ name: '5元红包', value: '5元', icon: '/static/images/games/prize-5.png' },
	{ name: '谢谢参与', value: '0元', icon: '/static/images/games/prize-0.png' }
]

// 我的奖品
const myPrizes = ref([
	{
		name: '30元红包',
		value: '30元',
		icon: '/static/images/games/prize-30.png',
		status: 'pending',
		statusText: '待领取'
	},
	{
		name: '10元红包',
		value: '10元',
		icon: '/static/images/games/prize-10.png',
		status: 'received',
		statusText: '已领取'
	}
])

// 游戏相关
const chances = ref(3)
const isShaking = ref(false)
const shakeText = ref('摇一摇')
const shakeThreshold = 15 // 摇动阈值
let lastShakeTime = 0
let lastShakeAcceleration = 0

// 初始化加速度计
const initAccelerometer = () => {
	uni.startAccelerometer({
		interval: 'normal'
	})
	
	uni.onAccelerometerChange((res) => {
		const acceleration = Math.sqrt(
			Math.pow(res.x, 2) + 
			Math.pow(res.y, 2) + 
			Math.pow(res.z, 2)
		)
		
		const now = Date.now()
		if (now - lastShakeTime > 1000) { // 1秒内不重复触发
			if (Math.abs(acceleration - lastShakeAcceleration) > shakeThreshold) {
				lastShakeTime = now
				lastShakeAcceleration = acceleration
				handleShake()
			}
		}
	})
}

// 处理摇动
const handleShake = () => {
	if (chances.value <= 0 || isShaking.value) return
	
	isShaking.value = true
	chances.value--
	
	// 播放音效
	uni.createInnerAudioContext().src = '/static/audio/shake.mp3'
	
	// 随机选择奖品
	const prizeIndex = Math.floor(Math.random() * prizes.length)
	const prize = prizes[prizeIndex]
	
	// 更新摇动文本
	shakeText.value = prize.name
	
	// 添加到我的奖品
	myPrizes.value.unshift({
		...prize,
		status: 'pending',
		statusText: '待领取'
	})
	
	// 显示中奖信息
	uni.showModal({
		title: '恭喜中奖',
		content: `您获得了${prize.name}`,
		showCancel: false
	})
	
	// 3秒后重置状态
	setTimeout(() => {
		isShaking.value = false
		shakeText.value = '摇一摇'
	}, 3000)
}

// 页面加载时获取数据
onMounted(() => {
	// TODO: 从服务器获取摇奖次数和我的奖品
	initAccelerometer()
})

// 页面卸载时停止加速度计
onUnmounted(() => {
	uni.stopAccelerometer()
})
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #F5F5F5;
	min-height: 100vh;
}

.header {
	padding: 40rpx 20rpx;
	text-align: center;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 24rpx;
	color: #666;
}

.shake-container {
	padding: 60rpx 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.shake-box {
	width: 400rpx;
	height: 400rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
	transition: transform 0.3s;
}

.shake-box.shaking {
	animation: shake 0.5s ease-in-out;
}

@keyframes shake {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-10deg); }
	75% { transform: rotate(10deg); }
}

.shake-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.shake-text {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
}

.shake-tips {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.tips-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.tips-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.8;
}

.tips-content text {
	display: block;
}

.my-prizes {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.prizes-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.prize-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.prize-item:last-child {
	border-bottom: none;
}

.prize-icon {
	width: 80rpx;
	height: 80rpx;
	margin-right: 20rpx;
}

.prize-info {
	flex: 1;
}

.prize-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 4rpx;
	display: block;
}

.prize-value {
	font-size: 24rpx;
	color: #D02B29;
}

.prize-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.prize-status.pending {
	color: #D02B29;
	background-color: #FFE4E4;
}

.prize-status.received {
	color: #999;
	background-color: #F5F5F5;
}
</style> 